<template>
  <div class="medical_service">
       <el-row :gutter="20">
        <el-col :span="9">
          <div class="grid-content bg-purple left-box">
            <div class="com-title">
              <p>居民健康水平</p>
            </div>
            <div class="map-box ">
              <leftMap></leftMap>
              </div>
             <div class="line-box "><leftLine></leftLine></div>
          </div>
        </el-col>
        <el-col :span="15">
          <div class="grid-content bg-purple ">
              <!-- <el-row :gutter="20"> -->
                <div class="top-box">
                  <div class="com-title">
                    <p>服务利用</p>
                  </div>
                  <el-col :span="8">
                    <div class="right-top-first-bar com_echarts">
                      <rightTopFirstBar></rightTopFirstBar>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="right-top-second-chart com_echarts">
                      <img class="fengeline" src="../../assets/images/screen/medical_service/portline.png" alt="">
                      <rightTopSecondChart></rightTopSecondChart>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="right-top-three-bar com_echarts">
                      <img class="fengeline" src="../../assets/images/screen/medical_service/portline.png" alt="">
                      <rightTopThreetBar></rightTopThreetBar>
                    </div>
                  </el-col>
                </div>
              <!-- </el-row> -->
              <el-row :gutter="20">
                <div class="middle-box">
                  <div class="com-title">
                    <p>医疗费用</p>
                  </div>
                  <el-col :span="12">
                    <div class=" com_echarts middle_left_bar">
                      <middleLeftBar></middleLeftBar>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class=" com_echarts middle_right_bar">
                      <img class="fengeline" src="../../assets/images/screen/medical_service/portline.png" alt="">
                      <middleRightBar></middleRightBar>
                    </div>
                  </el-col>
                </div>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                   <div class=" com_echarts right_bottom_first">
                     <div class="com-title">
                      <p>病案分析</p>
                    </div>
                     <rightBottomFirst></rightBottomFirst>
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="jgbox">
                    <div class=" com_echarts right_bottom_second">
                      <div class="com-title">
                        <p>医疗服务效率</p>
                      </div>
                      <el-row :gutter="20">
                        <el-col :span="12">
                          <div class=" com_echarts right_bottom_two">  
                            <rightBottomSecond></rightBottomSecond>
                          </div>
                        </el-col>
                        <el-col :span="12">
                        <div class=" com_echarts right_bottom_three">
                          <img class="fengeline" src="../../assets/images/screen/medical_service/portline.png" alt="">
                          <rightBottomThree></rightBottomThree>
                        </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                  
                </el-col>

              </el-row>
          </div>
          </el-col>
      </el-row>
  </div>
</template>

<script>
import leftMap from './medical_service/left_map.vue';
import leftLine from './medical_service/left_line.vue';
//右边顶部模块
import rightTopFirstBar from './medical_service/right_top_first_bar.vue';
import rightTopSecondChart from './medical_service/right_top_second_chart.vue';
import rightTopThreetBar from './medical_service/right_top_three_bar.vue';
//右边中间模块
import middleLeftBar from './medical_service/middle_left_bar.vue';
import middleRightBar from './medical_service/middle_right_bar.vue';
//右边底部模块
import rightBottomFirst from './medical_service/right_bottom_first.vue';
import rightBottomSecond from './medical_service/right_bottom_second.vue';
import rightBottomThree from './medical_service/right_bottom_three.vue';
export default {
  name: 'medical_service',
  components:{ leftMap, leftLine,rightTopFirstBar,rightTopSecondChart,rightTopThreetBar,middleLeftBar,middleRightBar,rightBottomFirst,rightBottomSecond,rightBottomThree},
  data () {
    return {

    }
  }
}
</script>
<style lang='scss'  rel="stylesheet/scss" >
body{
    width: 100%;
    height: 100%;
    background:url('../../assets/images/screen/health_resource/background.png');
    background-size:100% 100%;
    color:#fff;
    position: fixed;
}
.medical_service{
  padding: 0 14px;
  .map-box{
      width: 100%;
      height: 56vh;
  }
  .line-box{
    width: 100%;
    height: 30vh;
    margin-top: 10px;
  }
}

</style>
<style lang='scss'  rel="stylesheet/scss" scoped>

.medical_service{
  .el-row{
    margin-left: 0px!important;
    margin-right: 0px!important;
  }
  .el-col{
    padding-left: 0px!important;
    padding-right: 0px!important;
  }
  .left-box{
    background:url('../../assets/images/screen/health_resource/Healthpersonnel.png');
    background-size:100% 100%;
    margin-right: 10px;
  }
  .top-box,.middle-box,.right_bottom_first,.right_bottom_second{
    background:url('../../assets/images/screen/health_resource/Healthcost.png'); 
    background-size:100% 100%;
    width: 100%;
    height: 100%;
    display: inline-block;
  }
  .jgbox{
    margin-left: 10px;
  }
  .middle-box{
    margin-top:10px;
  }
  .com-title{
    background:url('../../assets/images/screen/health_resource/Commonshadow.png') left no-repeat;
    background-size: 100% 100%;
    p{
      line-height: 4vh;
      padding: 0 10px;
      font-size: 16px;
      color: #fff;
      font-weight: bold;
    }
  }
  .right-top-first-bar{
    width: 100%;
    height: 26vh;
  }
  .right-top-three-bar{
    width: 100%;
    height: 26vh;
  }
  .middle_left_bar,.middle_right_bar{
    width: 100%;
    height: 25vh;
  }
  .right_bottom_first,.right_bottom_second{
    width: 100%;
    height: 30vh;
    margin-top:10px;
  }
  .right_bottom_two,.right_bottom_three{
    width: 100%;
    height: 26vh;
  }
  .fengeline{
    height: 24vh;
    float: left;
    margin-top: 5px;
    width: auto;
  }
  .right-top-second-chart{
    width:100%;
    height:26vh;
  }
}
.map_box{
    width: 100%;
    height: 50vh;
}

</style>
